<!DOCTYPE html>
<html>
<head>
    <title>{$site_name}</title>
    <meta name="keywords" content="{$site_seo_keywords}" />
    <meta name="description" content="{$site_seo_description}">
    <meta name="author" content="ThinkCMF">
    <tc_include file="Public:head" />
    <style type="text/css">
        .tab-content {
            overflow: visible;
        }

        .uploaded_avatar_area {
            margin-top: 20px;
        }

        .uploaded_avatar_btns {
            margin-top: 20px;
        }

        .uploaded_avatar_area .uploaded_avatar_btns {
            display: none;
        }

        .file {
            position: relative;
            display: inline-block;
            /*background: #D0EEFF;*/
            /*border: 1px solid #99D3F5;*/
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            /*color: #1E88C7;*/
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }

            .file input {
                position: absolute;
                font-size: 100px;
                right: 0;
                top: 0;
                opacity: 0;
            }

            .file:hover {
                /*background: #AADFFD;
                border-color: #78C3F3;
                color: #004974;*/
                text-decoration: none;
            }
    </style>
</head>
<body class="body-white" id="top">
    <tc_include file="Public:nav" />
    <div class="container tc-main">
        <div class="row">
            <div class="span3">
                <tc_include file="Public:usernav" />
            </div>
            <div class="span9">
                <div class="tabs">
                    <ul class="nav nav-tabs" style="margin-left: -50px;">
                        <!--<li class="active"><a href="#one" data-toggle="tab"><i class="fa fa-user"></i> 修改头像</a></li>-->
                        <li class="active" style="font-size: 17px;font-weight: 600;margin-left: 100px;"><a style="color: #000000;" href="#one" data-toggle="tab">修改头像</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="one" style="margin-left:50px">
                            <if condition="empty($avatar)">
                                <img style="max-width:200px; min-width:200px;border-radius: 100px;"  src="__TMPL__Public/assets/images/headicon_128.png" class="headicon" />
                                <else />
                                <img style="max-width:200px; min-width:200px;border-radius: 100px;"  src="{:sp_get_user_avatar_url($avatar)}?t={:time()}" class="headicon" />
                            </if>
                            <a href="javascript:;" class="file btn btn-primary">
                                选择头像
                                <input type="file" onchange="avatar_upload(this)" id="avatar_uploder" name="file" />
                            </a>
                            <div class="uploaded_avatar_area">

                                <div class="uploaded_avatar_btns">
                                    <a class="btn btn-primary confirm_avatar_btn" onclick="update_avatar()">确定</a>
                                    <a class="btn" onclick="reloadPage()">取消</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- /container -->
    <tc_include file="Public:footer" />
    <tc_include file="Public:scripts" />
    <script type="text/javascript">
        function update_avatar() {
            var area = $(".uploaded_avatar_area img").data("area");
            $.post("{:U('profile/avatar_update')}", area,
                    function (data) {
                        if (data.status == 1) {
                            reloadPage(window);
                        }

                    }, "json");

        }
        function avatar_upload(obj) {
            var $fileinput = $(obj);
            /* $(obj)
            .show()
            .ajaxComplete(function(){
                $(this).hide();
            }); */
            Wind.css("jcrop");
            Wind.use("ajaxfileupload", "jcrop", "noty", function () {
                $.ajaxFileUpload({
                    url: "{:U('profile/avatar_upload')}",
                    secureuri: false,
                    fileElementId: "avatar_uploder",
                    dataType: 'json',
                    data: {},
                    success: function (data, status) {
                        if (data.status == 1) {
                            $("#avatar_uploder").hide();
                            var $uploaded_area = $(".uploaded_avatar_area");
                            $uploaded_area.find("img").remove();
                            var src = "__UPLOAD__avatar/" + data.data.file;
                            var $img = $("<img/>").attr("src", src);
                            $img.prependTo($uploaded_area);
                            $(".uploaded_avatar_btns").show();
                            var img = new Image();
                            img.src = src;

                            var callback = function () {
                                console.log(img.width);
                                $img.Jcrop({
                                    aspectRatio: 1,
                                    trueSize: [img.width, img.height],
                                    setSelect: [0, 0, 100, 100],
                                    onSelect: function (c) {
                                        $img.data("area", c);
                                    }
                                });
                            }

                            if (img.complete) {
                                callback();
                            } else {
                                img.onload = callback;
                            }

                        } else {
                            noty({
                                text: data.info,
                                type: 'error',
                                layout: 'center'
                            });
                        }

                    },
                    error: function (data, status, e) { }
                });
            });



            return false;
        }
    </script>
</body>
</html>